<template>
    <view class="businesshours">
            <view class="group">
                    <view class="title">
                        营业日期
                    </view>
                 
                    <checkbox-group class="date" @change="selectDate">
                        <label >
                            <checkbox value="1" />一
                        </label>
                        <label>
                            <checkbox value="2" />二
                        </label>
                        <label >
                            <checkbox value="3" />三
                        </label>
                        <label >
                            <checkbox value="4" />四
                        </label>
                        <label >
                            <checkbox value="5" />五
                        </label>
                        <label >
                            <checkbox value="6" />六
                        </label>
                        <label>
                            <checkbox value="7" />日
                        </label>
                    </checkbox-group>
                    
            </view>

            <view class="input-group">
                    <view class="label">开始时间</view>
                    <view class="time">
                        
                         <picker mode="time" class="plusgin" @change="bindStartTime">
                            <view>
                                 {{starttime}}<image src="/static/images/allow-down.png" />
                            </view>
                         </picker>
                    </view>
                    
            </view>

            <view class="input-group">
                    <view class="label">结束时间</view>
                    <view class="time">
                        
                         <picker mode="time" :start="starttime" class="plusgin" @change="bindEndTime">
                            <view>
                                 {{endtime}}<image src="/static/images/allow-down.png" />
                            </view>
                         </picker>
                    </view>
                    
            </view>


            <button class="submit" @tap="hanldeSubmit">保存</button>

    </view>
</template>
<script lang="ts">
import {Vue, Component} from 'vue-property-decorator';
import {postUpTime} from '@/request/actions'


@Component({})
export default class extends Vue{
    date:Array<string|number> = [];
    starttime:string = '请选择开始时间';
    endtime:string = '请选择结束时间';
    salonId:string|number = '';
    selectDate(e:any){
        this.date = e.detail.value;
        console.log(e.detail.value)
    }
    bindStartTime(e:any){
        this.starttime = e.detail.value;
         
    }
    bindEndTime(e:any){
        this.endtime = e.detail.value;
    }
    toZh(len:number):any{
        const Zhdate = ['一','二','三','四','五','六','日'];

        return Zhdate.slice(0,len);

    }
    hanldeSubmit(){
        let date = this.toZh(this.date.sort().length);
        let starttime = this.starttime;
        let endtime = this.endtime;
        let salonId = this.salonId;

        console.log(endtime)

        if(date.length == 0){
            return uni.showToast({
                        title: '请选择营业日期',
                        icon: 'none',
                        duration: 2000
                    })
        }else if(starttime.length == 0){
            return uni.showToast({
                        title: '请选择营业开始时间',
                        icon: 'none',
                        duration: 2000
                    })
        }else if(endtime.length == 0 ){
            return uni.showToast({
                        title: '请选择营业结束时间',
                        icon: 'none',
                        duration: 2000
                    })
        }else if(starttime ==  endtime ){
            return uni.showToast({
                        title: '营业时间不能相同',
                        icon: 'none',
                        duration: 2000
                    })
        }

       let day = date+'';
       let time = starttime+'-'+endtime;


       
       postUpTime({
            day,
            time,
            salonId
       }).then((r:any)=>{
           let {data:res} = r;

            if(res.status == 200){
                uni.showModal({
                            content:'设置成功',
                            showCancel:false,
                            success:(res:any)=>{
                                uni.navigateBack();
                            }
                        })
            }

            
       })
         
    }

    onLoad(query:any){
        this.salonId = query.salonId;
       
    }
}
</script>
<style lang="scss">
@import './_static/scss/index.scss';
</style>


